import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  //state保存状态
  state: {
    count:0,
    info:{name:"kobe",heigt:2.00,age:23}
  },

  //像computed，第一个参数为state，可以读取state中的count，第二个参数为getters，可以读取自己getters的数据
  getters:{
    powercount(state){
      return state.count*state.count
    },
    //读取自己getters中的powercount
    powercountadd100(state,getters){
      return getters.powercount+100
    },
    //接收外部传递过来的mycount，和store中的count作比较，这时getters需要返回一个函数，供外部调用传参
    ismorethan(state,getters){
      // return function(mycount){
      //   let res=state.count>mycount?`大于${mycount}`:`小于${mycount}`
      //   return res
      // }
      return mycount=>{
        return state.count>mycount?`大于${mycount}`:`小于${mycount}`
      }
    }
  },

  //供外部this.$store.commit('函数名')调用，来改变state中的值
  //里面全部是同步方法，可以实时更新，不能是异步的，比如settimeout函数
  mutations: {
    //自动带有一个state参数，表示store中的state
    increment(state){
      state.count++
    },
    decrement(state){
      state.count--
    },

    //通过外部传递的参数counts增加
    addcountbys(state,counts){
      state.count+=counts
    },

    //第二种接收方式
    // addcountbys(state,coutobj){
    //   state.count+=coutobj.counts
    // }


    // 如果给对象添加新的属性，并同时是响应式的，需要用vue.set(数组或对象，索引值或属性，值)
    //set方法可以增加到响应式系统里面
    updateInfo(state){
      //不会响应式，增加addres属性
      state.info['address']='洛杉矶'

      //会响应式，增加addres属性
      Vue.set(state.info,'address','洛杉矶')

      //不会响应式，删除属性
      delete state.info.name

      //会响应式，删除属性
      Vue.delete(state.info,'name')
    }


  },
  //mutations的异步操作，通过context(也就是store)上下文，context.commit('mutations中的方法')来实现异步操作
  actions: {
    // aincrement(context,payload){
    //   setTimeout(() => { 
    //     context.commit('increment')
    //     console.log(payload.message)
    //     payload.success()
    //   }, 2000);  
    // }

    //Promise风格，返回的是一个Promise，所以调用后可以then，通过resolve把成功的信息传回去
    aincrement(context,payload){
      return new Promise((resolve,reject)=>{
        setTimeout(() => {
          context.commit('increment')
          console.log(payload)
          resolve('我已经增加成功了')
        }, 2000);
      })
    }
  },
  modules: {
  }
})
